<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import { OrderItem, OrderListParams, getMemberOrderAPI } from '../../../services/order'
	import { OrderState, OrderStateList, } from '../../../services/constants'
	const props = defineProps<{
		orderState : number
	}>()
	const { safeAreaInsets } = uni.getSystemInfoSync()
	const queryParams = ref<OrderListParams>({
		page: 1,
		pageSize: 5,
		orderState: props.orderState,
	})
	const pages = ref(null)
	const isTriggered = ref(false)
	const orderList = ref<OrderItem[]>([])
	const getMemberOrderData = async () => {
		const res = await getMemberOrderAPI(queryParams.value)
		orderList.value = res.result.items
		pages.value = res.result?.pages
	}
	const onScrolltolower = async () => {
		if (queryParams.value.page > pages.value) return
		queryParams.value.page++
		const res = await getMemberOrderAPI(queryParams.value)
		orderList.value = orderList.value.concat(res.result.items)
	}

	const onRefresherrefresh = async () => {
		isTriggered.value = true
		queryParams.value.page = 1
		const res = await getMemberOrderAPI(queryParams.value)
		orderList.value = res.result?.items
		isTriggered.value = false
	}
	onMounted(() => {
		// getMemberOrderData()
	})
</script>

<template>
	<scroll-view scroll-y class="orders" refresher-enabled :refresher-triggered="isTriggered"
		@refresherrefresh="onRefresherrefresh" @scrolltolower="onScrolltolower">
		<view class="card" v-for="item in orderList" :key="item">
			<!-- 订单信息 -->
			<view class="status">
				<text class="date">{{item.createTime}}</text>
				<!-- 订单状态文字 -->
				<text>{{OrderStateList[item.orderState].text}}</text>
				<!-- 待评价/已完成/已取消 状态: 展示删除订单 -->
				<text class="icon-delete"
					v-if="item.orderState==(OrderState.DaiPingJia || OrderState.YiWanCheng || OrderState.YiQuXiao)"></text>
			</view>
			<!-- 商品信息，点击商品跳转到订单详情，不是商品详情 -->
			<navigator v-for="sku in item.skus" :key="sku" class="goods" :url="`/pagesOrder/detail/index?id=${sku.id}`"
				hover-class="none">
				<view class="cover">
					<image mode="widthFix" :src="sku.image"></image>
				</view>
				<view class="meta">
					<view class="name ellipsis">{{sku.name}}</view>
					<view class="type">{{sku.attrsText}}</view>
				</view>
			</navigator>
			<!-- 支付信息 -->
			<view class="payment">
				<text class="quantity">共{{item.totalNum}}件商品</text>
				<text>实付</text>
				<text class="amount"> <text class="symbol">¥</text>{{item.totalMoney}}</text>
			</view>
			<!-- 订单操作按钮 -->
			<view class="action">
				<!-- 待付款状态：显示去支付按钮 -->
				<navigator v-if="item.orderState==OrderState.DaiFuKuan" class="button primary"
					:url="`/pagesOrder/detail/index?id=${item.id}`" hover-class="none">去支付</navigator>
				<!-- </template> -->
				<template v-else>
					<navigator class="button secondary" :url="`/pagesOrder/create/index?orderId=${item.id}`"
						hover-class="none">
						再次购买
					</navigator>
					<!-- 待收货状态: 展示确认收货 -->
					<navigator v-if="item.orderState==OrderState.DaiShouHuo" class="button primary"
						:url="`/pagesOrder/detail/index?id=${item.id}`" hover-class="none">确认收货</navigator>
				</template>
			</view>
		</view>


		<view class="card">
			<view class="card-header">
				<view><view class="name">上海外滩瑞吉酒店</view>
					<view class="order-num">订单号：2025082701</view>
				</view>
				<text class="status">预订成功</text>
			</view>
			<view class="desc">
				<view class="text">入住日期</view>
				<view class="date">2025-08-27</view>
			</view><view class="desc">
				<view class="text">离店日期</view>
				<view class="date">2025-08-27</view>
			</view><view class="desc">
				<view class="text">房型</view>
				<view class="date">豪华大床房</view>
			</view><view class="desc">
				<view class="text">总价</view>
				<view class="price">¥1,400.37</view>
			</view>
			<view class="action">
				<navigator class="button secondary" hover-class="none" url="/pagesOrder/detail/index">查看详情</navigator>
				<navigator class="button  primary" hover-class="none">
					再次购买
				</navigator>

			</view>
		</view>
		<!-- 底部提示文字 -->
		<view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
			{{ true ? '没有更多数据~' : '正在加载...' }}
		</view>
	</scroll-view>

</template>

<style lang="scss" scoped>
	.orders {
		.card {
			min-height: 100rpx;
			padding: 32rpx;
			margin: 32rpx 32rpx 0;
			border-radius: 12rpx;
			background-color: #fff;
			box-shadow: 0 3px 10px #efefef;

			.card-header {
				padding-bottom: 32rpx;
				border-bottom: 1px solid #e1e1ee;
				display: flex;
				justify-content: space-between;
				.order-num{
					color: #666;
				}
				.status {
					color: #666;
				}
				.name {
					color: #000;
					padding-bottom: 10rpx;
				}
			}
			.desc{
				display: flex;
				justify-content: space-between;
				padding-top: 10rpx;
				color: #333;
				.price{
					color: #f97316;
				}
			}
		}

		

		.action {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding-top: 20rpx;

			.button {
				width: 180rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 20rpx;
				border-radius: 10rpx;
				border: 1rpx solid #ccc;
				font-size: 26rpx;
				color: #444;
			}

			.secondary {
				color: $uni-color-primary;
				border-color: $uni-color-primary;
			}

			.primary {
				color: #fff;
				background-color: $uni-color-primary;
			}
		}

		.loading-text {
			text-align: center;
			font-size: 28rpx;
			color: #666;
			padding: 20rpx 0;
		}
	}
</style>